<template>
  <!--导航条-->
  <div>


  <!--图片-->
  <div class="banner">
    <img src="@/assets/产品1.jpg">
    <div class="wenzi">
      <h3>我们制造的不是产品而是关爱！</h3>
    </div>
  </div>

  <!-- 内容 -->
  <div class="footer">
    <!--    医院内容-->
    <div class="footer-top">
      <div class="footer-top-left yiyuan">医院</div>
      <div class="footer-top-rhg">
        <ul>
          <li><a>贵州省什么什么医院</a></li>
          <li><a>贵州省什么什么医院</a></li>
          <li><a>贵州省什么什么医院</a></li>
          <li><a>贵州省什么什么医院</a></li>
          <li><a>贵州省什么什么医院</a></li>
        </ul>
      </div>
    </div>
    <!--  产品内容  -->
    <div class="footer-banner">
      <div class="footer-banner-an">
        <a href="#" >劲系列</a>
      </div>
      <div class="footer-banner-an">
        <a href="#" >雅系列</a>
      </div>
      <div class="footer-banner-an">
        <a href="#" >羽系列</a>
      </div>
      <div class="footer-banner-an">
        <a href="#" >梦系列</a>
      </div>
      <div class="footer-banner-an">
        <a href="#" >灵系列</a>
      </div>
      <div class="footer-banner-an">
        <a href="#" >动轮椅</a>
      </div>
      <div class="footer-banner-an">
        <a href="#" >电动轮椅</a>
      </div>
      <div class="footer-banner-an">
        <a href="#" >沙滩轮椅</a>
      </div>
    </div>

    <!--    轮播图-->

    <div class="swiper-container">

        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="./images/1578357370250946.jpg"></div>
          <div class="swiper-slide"><img src="./images/1578357652454342.jpg"></div>
          <div class="swiper-slide"><img src="./images/1578357695431668.jpg"></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->

    </div>


    <!--    详细介绍-->
    <div class="footer-footer">
      这个产品真好，真好用
    </div>

    <!--    购买按钮-->
    <div class="footer-footer1">
      <button class="button1">剩余轮椅量</button>
      <button>点击租聘</button>
      <button>价格</button>

    </div>
  </div>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  name: "index",
  mounted() {
    this.initSwiper();
  },
  methods: {
    initSwiper() {
      new Swiper(".swiper-container", {
        //设置轮播的循环方式
        loop: true,

        //设置自动播放间隔时间
        autoplay: 2000,

        // 轮播效果,默认为平滑轮播
        effect: "slide",

        //分页器
        pagination: ".swiper-pagination",

        //前进后退按钮
        prevButton: ".swiper-button-prev",
        nextButton: ".swiper-button-next",


        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
          el: '.swiper-scrollbar',
        },
        // 用户中断轮播后续播
        autoplayDisableOnInteraction: false,
      });
    },
  }

}
</script>

<style scoped lang="css">
@import "../../../node_modules/swiper/dist/css/swiper.css";
.swiper-slide img {
  margin-left: 200px;
  width: 65%;
  object-fit: cover;
}
/*    轮播图*/
/*.swiper-big{*/
/*  margin-left: 150px;*/
/*  width: 1100px;*/
/*  height: 450px;*/
/*  border: 1px solid black;*/
/*}*/
.swiper-container {
  width: 1100px;
  height: 477px;
  margin-left: 150px;
  margin-top: 10px;
}
/*<!-- 导航条 -->*/
*{
  margin: 0;
  padding: 0;
  background-color: #f8f9fa;
}
.nav{
  display: flex;
  justify-content: center;
  height: 80px;
  background-color: #fff;
}
.logo{
  height: 80px;
  width: 200px;
}
.zui{
  display: flex;
  text-align: center;
}
li{
  display: inline-block;
  text-align: center;
  line-height: 80px;
  font-size: 18px;
  list-style:none;
  width: 200px;
}
/* 鼠标滑动变效果*/
li:hover{
  border-top:1px solid #ffc107;
}
li:hover a{
  color: #ffc107;
}
li a{
  display: inline-block;
  color: #383838;
  text-decoration:none;
}
/*下拉菜单
*/
.drop {
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  width: 200px;
  text-align: center;
  border: none;
}

.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  text-align: center;
  background-color: #fff;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {color: #ffc107}

.dropdown:hover .dropdown-content {
  display: inline-block;
  z-index: 1;
}

.dropdown:hover .drop {
  border-top: 1px solid  #ffc107;
  color: #ffc107;
}


/*    banner*/
.banner img {
  max-width: 100%;
}
.wenzi{
  font-size: 50px;
  font-weight: bolder;
  color: #fff;
  margin-top: -200px;
  margin-left: 350px;
}

/*    内容区域*/
.footer{
  position: absolute;
  margin-left: 60px;
  margin-top: 60px;
  height: 700px;
  width: 1400px;
  background: #fff;
}

.footer-top{
  display: flex;
  justify-content: space-around;
  width: 1400px;
  height: 120px;
  border-bottom: 1px solid #B8B8B8  ;
}
.footer-top-left{
  width: 80px;
  height: 120px;
  text-align: center;
}
.yiyuan{
  margin-left: 10px;
  font-size: 40px;
  font-weight: bolder;
  color: #24394e;
  line-height: 120px;
}
.footer-top-rhg ul li{
  text-align: center;
  list-style:none;
}
.footer-top-rhg li a{
  margin-top: 20px;
  text-align: center;

}
.footer-top-rhg li:hover{
  border-bottom: 5px solid #ffc107;
  border-top: 0;
}


/*    产品内容*/
.footer-banner{
  display: flex;
  justify-content: center;
  height: 150px;

}
.footer-banner-an{
  margin-top: 45px;
  width: 160px;
  height: 60px;
}
.footer-banner-an a{
  display: block;
  background-color: #fff;
  text-decoration: none;
  color: black;
  line-height: 2.5;
  padding: 5px 40px;
  text-align: center;
  font-size: 16px;
  margin: 5px;
  border-radius: 30px;
}
.footer-banner-an a:hover{
  background-color: #fa9507;
}



/*    详细介绍*/
.footer-footer{
  margin-top: 10px;
  margin-left: 200px;
  font-size: 20px;
  text-align: center;
  width: 1000px;
  border: 1px solid black;
}

/*    购买按钮*/
.footer-footer1{
  display: flex;
  margin-top: 20px;
  margin-left: 400px;

}
.footer-footer1 button{
  margin-right: 10px;
  width: 200px;
  height: 60px;
  border-radius: 30px;
  background-color: #fa9507;
  border: 1px solid #fa9507;
  font-size: 20px;
  color: #fff;
}
</style>
